<template>
  <div class="container">
    <div class="header">
      <div>
        <el-input v-model="inputName" placeholder="请输入菜品名称">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchHandler">查询</el-button>
      </div>
      <add/>
    </div>

    <el-table :data="tableData" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column prop="name" label="菜品名称"> </el-table-column>
      <el-table-column prop="image" label="图片">
        <template slot-scope="scope">            
          <img :src="`/dev-api/common/download?name=${scope.row.image}`" width="40" height="40" />
        </template>       
      </el-table-column>
      <el-table-column prop="categoryName" label="菜品分类"> </el-table-column>
      <el-table-column prop="phone" label="售价">
        <template slot-scope="scope">            
          <span>￥{{ scope.row.price/100 }}</span>
        </template> 
      </el-table-column>
      <el-table-column prop="status" label="售卖状态">
        <template slot-scope="scope">
          <span>{{ getDishStatus(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后操作时间"> </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <div style="display: flex;">
            <edit :selectedData="scope.row" :sup_this="sup_this" />
            <changeStatus :selectedData="scope.row" :sup_this="sup_this" />
            <shanchu :selectedData="scope.row" :sup_this="sup_this" />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
import { dishList } from '@/api/dish'
import { dishStatus } from '@/config/dictionary'
import add from './module/add.vue'
import edit from './module/edit.vue'
import changeStatus from './module/changeStatus.vue'
import shanchu from './module/shanchu.vue'

export default {
  components: { add, edit, changeStatus, shanchu },
  data() {
    return {
      // 菜品管理table数据
      tableData: [],
      currentPage: 0,
      tableDataTotal: 0,
      pageNumber: 1,
      pageSize: 10,
      // 查询要输入的菜品名称
      inputName: '',
      // 菜品选择数据
      multipleSelectionDishList: [],
      
      sup_this: this,
      loading: true,
    };
  },
  mounted() {
    this.$nextTick(() => {
      let params = {
        page: this.pageNumber,
        pageSize: this.pageSize
      }

      // 获取菜品管理列表数据
      this.getDishList(params)
    })
  },
  methods: {
    /**
     * 获取菜品管理列表数据
     */
    getDishList(params) {
      this.loading = true;
      if (!params) {
        params = {
          page: this.pageNumber,
          pageSize: this.pageSize
        }
      }
      dishList(params).then((res) => {
        this.tableData = res.data.records
        this.tableDataTotal = res.data.total
        this.loading = false;
      }).catch((err) => {
        // 错误的处理
      })
    },
    /**
     * 页面size改变的回调
     */
    handleSizeChange(val) {
      this.pageSize = val
      let params = {
        page: this.pageNumber,
        pageSize: this.pageSize
      }

      if (this.inputName) {
        params.name = this.inputName
      }

      // 获取菜品管理列表数据
      this.getDishList(params)
    },
    /**
     * 页数改变的回调
     */
    handleCurrentChange(val) {
      this.pageNumber = val
      let params = {
        page: this.pageNumber,
        pageSize: this.pageSize
      }

      if (this.inputName) {
        params.name = this.inputName
      }

      // 获取菜品管理列表数据
      this.getDishList(params)
    },
    /**
     * 获取账号状态的文字内容
     */
    getDishStatus(row) {
      let selectedObj = dishStatus.find(item => item.key == row.status)
      if(!selectedObj) return '无'

      return selectedObj.value
    },
    /**
     * 查询处理的回调
     */
    searchHandler() {
      let params = {
        page: this.pageNumber,
        pageSize: this.pageSize,
      }

      if (this.inputName) {
        params.name = this.inputName
      }

      // 获取菜品管理列表数据
      this.getDishList(params)
    },
    /**
     * 菜品选择的回调
     * @param {Array} val 
     */
    handleSelectionChange(val) {
      this.multipleSelectionDishList = val;
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    .el-input {
      width: 250px;
      margin-right: 20px;
    }
  }
}
</style>
